<template>
  <div class="orders-page">
    <h1 class="page-title">订单列表</h1>
    <div class="orders-list">
      <OrderCard v-for="order in orders" :key="order.id" :order="order" />
    </div>
  </div>
</template>

<script>
import OrderCard from './bus_card/BusOrderCard.vue'; // 引入订单卡片组件
//import ordersData from './ordersData'; // 引入示例订单数据
import { ref, onMounted } from 'vue';
import request from '../../util/request';

export default {
  name: 'Orders',
  components: {
    OrderCard,
  },
  setup() {

    const orders = ref([]);

    onMounted(() => {
      console.log('订单列表页面挂载');
      getOrders();
    });

    const getOrders = () => {
      // 模拟 API 调用获取订单数据
      request.post('order/my', {
        userid: sessionStorage.getItem('userid'),
        role: 'business'
      }).then(res => {
        const ol = res.data.ol;
        const pl = res.data.pl;
        const cl = res.data.cl;
        orders.value = ol.map((o, i) => ({
          ...o,
          prodName: pl[i].prodName,
          cusName: cl[i],
          orderPrice: pl[i].prodPrice * o.orderBuyCount,
          orderPicture: pl[i].prodPicture
        }));
      }).catch(err => {
        console.error("获取订单失败：", err);
      });
    };

    return {
      orders,
      getOrders,
    };
  },
};
</script>

<style src="../../assets/styles/busOrder.css" scoped></style>